<script setup lang="ts">
import { PropType, computed } from 'vue'
import { defineVaDataTableColumns } from 'vuestic-ui'
import { Model, ProtectType, ModelType } from '../types'
// import UserPhoto from '../../../components/UserPhoto.vue'
import { Pagination, Sorting } from '../../../data/pages/projects'
import { useVModel } from '@vueuse/core'
import { useRouter } from 'vue-router'

const { push } = useRouter()

const protectText: Record<ProtectType, string> = {
  标准模式: '标准模式',
  差分隐私: '差分隐私',
  XNegDL: 'XNegDL',
  PPUTL: 'PPUTL',
  共享权重: '共享权重',
  同态加密: '同态加密',
}
const protectColors: Record<ProtectType, string> = {
  标准模式: 'pink',
  差分隐私: 'info',
  XNegDL: 'delete',
  PPUTL: 'delete',
  共享权重: 'warning',
  同态加密: 'warning',
}

const modelText: Record<ModelType, string> = {
  resnet18: 'resnet18',
  resnet50: 'resnet50',
  densenet121: 'densenet121',
  alexnet: 'alexnet',
  vgg16: 'vgg16',
  vgg19: 'vgg19',
  inception_v3: 'inception_v3',
  googlenet: 'googlenet',
}
const modelColors: Record<ModelType, string> = {
  resnet18: 'info',
  resnet50: 'info',
  densenet121: 'warning',
  alexnet: 'warning',
  vgg16: 'danger',
  vgg19: 'danger',
  inception_v3: 'info',
  googlenet: 'warning',
}

const columns = defineVaDataTableColumns([
  { label: '分类', key: 'actions' },
  { label: '模型名称', key: 'name', sortable: true },
  { label: '保护类型', key: 'model_type', sortable: true },
  { label: '模型类型', key: 'protect_type', sortable: true },
  { label: '描述', key: 'description', sortable: false },
])

const props = defineProps({
  models: {
    type: Array as PropType<Model[]>,
    required: true,
  },
  loading: {
    type: Boolean,
    required: true,
  },
  sortBy: {
    type: Object as PropType<Sorting['sortBy']>,
    required: true,
  },
  sortingOrder: {
    type: Object as PropType<Sorting['sortingOrder']>,
    required: true,
  },
  pagination: {
    type: Object as PropType<Pagination>,
    required: true,
  },
})

const emit = defineEmits<{
  (event: 'edit', model: Model): void
  (event: 'delete', model: Model): void
}>()
const gotoTaskBoard = (data: Model) => {
  // // console.log(data)
  push({ path: `/split/${data.id}/${data.name}` })
  // push({ name: 'split' })
}
const avatarColor = (userName: string) => {
  const colors = ['primary', '#FFD43A', '#ADFF00', '#262824', 'danger']
  const index = userName.charCodeAt(0) % colors.length
  return colors[index]
}

const sortByVModel = useVModel(props, 'sortBy', emit)
const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)

const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))
</script>

<template>
  <div>
    <VaDataTable
      v-model:sort-by="sortByVModel"
      v-model:sorting-order="sortingOrderVModel"
      :items="models"
      :columns="columns"
      :loading="loading"
    >
      <template #cell(name)="{ rowData }">
        <div style="font-weight: bolder" lass="ellipsis max-w-[230px] lg:max-w-[450px]">
          {{ rowData.name }}
        </div>
      </template>
      <template #cell(model_type)="{ rowData }">
        <VaBadge :text="modelText[rowData.model_type]" :color="modelColors[rowData.model_type as ModelType]" />
      </template>
      <template #cell(protect_type)="{ rowData }">
        <VaBadge
          :text="protectText[rowData.protect_type]"
          :color="protectColors[rowData.protect_type as ProtectType]"
        />
      </template>
      <template #cell(description)="{ rowData }">
        <div>
          {{ rowData.description }}
        </div>
      </template>

      <template #cell(actions)="{ rowData: model }">
        <div class="flex justify-start gap-2">
          <!-- <VaButton
            preset="primary"
            size="small"
            color="primary"
            icon="mso-edit"
            aria-label="Edit model"
            @click="$emit('edit', model as Model)"
          /> -->
          <VaButton
            preset="primary"
            size="small"
            color="primary"
            icon="mso-dialogs"
            aria-label="Edit model"
            @click="gotoTaskBoard(model as Model)"
          />
          <!-- <VaButton
            preset="primary"
            size="small"
            icon="mso-delete"
            color="danger"
            aria-label="Delete model"
            @click="$emit('delete', model as Model)"
          /> -->
        </div>
      </template>
    </VaDataTable>
    <div class="flex flex-col-reverse items-center justify-between gap-2 py-2 md:flex-row">
      <div>
        <b>{{ $props.pagination.total }} results.</b>
        Results per page
        <VaSelect v-model="$props.pagination.perPage" class="!w-20" :options="[15, 50, 100]" />
      </div>

      <div v-if="totalPages > 1" class="flex">
        <VaButton
          preset="secondary"
          icon="va-arrow-left"
          aria-label="Previous page"
          :disabled="$props.pagination.page === 1"
          @click="$props.pagination.page--"
        />
        <VaButton
          class="mr-2"
          preset="secondary"
          icon="va-arrow-right"
          aria-label="Next page"
          :disabled="$props.pagination.page === totalPages"
          @click="$props.pagination.page++"
        />
        <VaPagination
          v-model="$props.pagination.page"
          buttons-preset="secondary"
          :pages="totalPages"
          :visible-pages="5"
          :boundary-links="false"
          :direction-links="false"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.va-data-table {
  ::v-deep(tbody .va-data-table__table-tr) {
    border-bottom: 1px solid var(--va-background-border);
  }
}

.time {
  font-size: 14px;
  color: #333;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #e7edf8;
}
</style>
